@import "./common/mixin.styl"

html,body
  width 100%
  background rgb(252,252,252)
  overflow-x hidden
  .catalog-wrapper
    .head-wrapper
      position fixed
      top 0
      left 0
      z-index 9
      font-size 0
      background rgb(255,255,255)
      .back-wrapper
        width computedNum(49)
        height computedNum(48)
        vertical-align top
        background url("../img/back-icon.png") no-repeat center center
        background-size computedNum(8.5) computedNum(15)
        margin-right computedNum(11)
      .center-wrapper
        width computedNum(255)
        height computedNum(48)
        .select-group
          width computedNum(150)
          height computedNum(48)
          margin-left computedNum(52.5)
          font-size computedNum(0)
          .group-text
            font-family SimHei
            height computedNum(48)
            line-height computedNum(48)
            font-size computedNum(16)
          .up-down-icon
            vertical-align top
            width computedNum(11)
            height computedNum(48)
            margin-left computedNum(10)
            background url("../img/up-down-icon.png") no-repeat
            background-position computedNum(-11.5) center
            background-size computedNum(22.5) computedNum(6.5)
            &.active
              background url("../img/up-down-icon.png") no-repeat left center
              background-size computedNum(22.5) computedNum(6.5)
      .order-wrapper
        width computedNum(60)
        height computedNum(48)
        vertical-align top
        .order-icon-wrapper
          width computedNum(20)
          height computedNum(48)
          margin 0 auto
          background url("../img/order-icon.png") no-repeat
          background-position computedNum(-21) center
          background-size computedNum(40.5) computedNum(13.5)
          &.active
            background url("../img/order-icon.png") no-repeat left center
            background-size computedNum(40.5) computedNum(13.5)
    .group-list-mask
      position fixed
      top 0
      left 0
      width 100%
      height 100%
      background rgba(0,0,0,0.5)
      z-index 8
      display none
      &.show
        display block
      .group-list-wrapper
        top computedNum(48)
        left 0
        width 100%
        background #ffffff
        z-index 10
        max-height computedNum(300)
        overflow-y auto
        ul
          margin-bottom computedNum(20)
          li
            font-family SimHei
            font-size computedNum(15)
            color #000000
            text-align center
            padding computedNum(8) 0
    .chapter-list-wrapper
      padding-top computedNum(48)
      ul
        margin-top computedNum(12)
        li
          font-size 0
          padding 0 computedNum(20)
          .chapter-name
            font-size computedNum(15)
            vertical-align top
            width computedNum(290)
            height computedNum(40)
            line-height computedNum(40)
            overflow hidden
            white-space nowrap
            text-overflow ellipsis
            &.active
              color rgb(255,62,62)
          .type-icon
            width computedNum(45)
            height computedNum(30)
            &.coin
              background url("../img/need-icon.png") no-repeat right center
              background-size computedNum(20) computedNum(20)
            &.gift
              background url("../img/need-gift.png") no-repeat right center
              background-size computedNum(18.5) computedNum(17)
            &.vip
              background url("../img/need-vip.png") no-repeat right center
              background-size computedNum(17) computedNum(15)
    .no-more
      text-align center
      font-size computedNum(15)
      padding-bottom computedNum(10)
      display none
